<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
		:type="!showDetail ? 'list' : 'hide'"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						v-symbols
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="selectTime"
						:placeholder="$t('common.please_choose')"
						style="width:150px"
					>
						<el-option
							:label="`${$t('member.application_time')}`"
							value="0"
						></el-option>
						<el-option
							:label="`${$t('member.audit_completion_time')}`"
							value="1"
						></el-option>
					</el-select>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						style="width:455px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="selectUserName"
						:placeholder="$t('common.please_choose')"
						style="width:150px"
					>
						<el-option
							:label="`${$t('member.applicant')}`"
							value="0"
						></el-option>
						<el-option
							:label="`${$t('member.reviewed_by')}`"
							value="1"
						></el-option>
					</el-select>
					<el-input
						v-model="queryData.userName"
						v-symbols
						clearable
						size="medium"
						:maxlength="12"
						style="width: 183px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<el-form-item :label="`${$t('member.audit_status')}:`">
					<el-select
						v-model="queryData.auditStatus"
						clearable
						:placeholder="$t('common.select_all')"
						style="width: 180px"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in auditStatus"
							:key="item.code"
							:label="item.description"
							:value="Number(item.code)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`${$t('member.lock_status')}:`">
					<el-select
						v-model="queryData.lockStatus"
						clearable
						:placeholder="$t('common.select_all')"
						style="width: 180px"
						:popper-append-to-body="false"
					>
						<!-- <el-option
								:label="`${$t('common.all')}`"
								value=""
							></el-option> -->
						<el-option
							v-for="item in lockOrderType"
							:key="item.code"
							:label="item.description"
							:value="Number(item.code)"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item style="margin-left: 10px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				@sort-change="changeTableSort"
				highlight-current-row
			>
				<el-table-column
					align="center"
					:label="`${$t('member.lock_status_check')}`"
					:width="getWidth(60)"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<el-checkbox
							v-if="
								hasPermission('103021') &&
									(scope.row.auditStatus === 0 ||
										scope.row.auditStatus === 1)
							"
							v-model="scope.row.lockStatus"
							:disabled="setDisabled(scope.row)"
							@change="lockChange(scope.row)"
						></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column
					prop="auditStep"
					align="center"
					:label="`${$t('common.actions')}`"
					:width="getWidth(190)"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<el-button
							v-if="
								hasPermission('103022') &&
									Number(scope.row.stepCode) === 1
							"
							:class="
								Number(scope.row.lockAccountId) !==
									userInfo.id ||
								scope.row.lockName !== userInfo.username
									? 'dis'
									: ''
							"
							type="primary"
							size="medium"
							@click="goDetail(scope.row)"
						>
							{{
								typeFilter(scope.row.stepCode, 'auditStepType')
							}}
						</el-button>
						<el-button
							v-if="
								hasPermission('103023') &&
									Number(scope.row.stepCode) === 0
							"
							type="success"
							size="medium"
							@click="goDetail(scope.row)"
						>
							{{
								typeFilter(scope.row.stepCode, 'auditStepType')
							}}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column
					prop="eventId"
					align="center"
					:label="`${$t('member.event_id')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.eventId || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="`${$t('member.application_time')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="applyName"
					align="center"
					:label="`${$t('member.applicant')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.applyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantId"
					align="center"
					:label="`${$t('common.belong_merchant')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ merchantFilter(scope.row.merchantId) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="applyRemark"
					align="center"
					:label="`${$t('member.apply_remark')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.applyRemark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('member.audit_status')}`"
					:width="getWidth(110, 1.5)"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="Number(auditStatus) !== 0"
							:class="
								Number(scope.row.auditStatus) === 0
									? 'deleteRgba'
									: Number(scope.row.auditStatus) === 1
									? 'lockingRgba'
									: Number(scope.row.auditStatus) === 3
									? 'normalRgba'
									: 'disableRgba'
							"
						>
							{{
								typeFilter(
									scope.row.auditStatus,
									'updMemberAuditStatus'
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="lockDatetime"
					align="center"
					:label="`${$t('member.lock_date_time')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.lockDatetime || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="auditDatetime"
					align="center"
					:label="`${$t('member.audit_completion_time')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.auditDatetime || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="auditName"
					align="center"
					:label="`${$t('member.reviewed_by')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span v-if="scope.row.lockStatus == 1">
							{{ scope.row.lockName || '-' }}
						</span>
						<span v-else>
							{{ scope.row.auditName || '-' }}
						</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<addMemberReview
			slot="nonListContent"
			:type="type"
			:rowData="rowData"
			@goBack="goBack"
		></addMemberReview>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername, getUserInfo } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
const end = () =>
	dayjs()
		.endOf('day')
		.valueOf()
const start = () =>
	dayjs()
		.startOf('day')
		.valueOf()

export default {
	name: routerNames.addMemberCheck,
	components: {
		MainContent,
		addMemberReview: () => import('./components/addMemberReview')
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			selectTime: '0',
			selectUserName: '0',
			queryData: {
				userName: undefined,
				auditStatus: undefined,
				auditStep: '',
				orderProperties: undefined,
				applyName: undefined,
				auditName: undefined,
				lockStatus: '',
				auditNum: undefined,
				orderType: undefined,
				orderKey: undefined
			},
			searchTime: [start(), end()],
			showDetail: false,
			rowData: {},
			type: true,
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			name: '',
			dataList: [],
			userInfo: {}
		}
	},
	computed: {
		auditStatus() {
			return this.globalDics.updMemberAuditStatus || []
		},
		lockOrderType() {
			return this.globalDics.lockStatus || []
		}
	},
	mounted() {
		this.userInfo = getUserInfo()
		this.name = getUsername()
	},
	methods: {
		loadData() {
			this.loading = true
			if (this.selectUserName === '0') {
				this.queryData.applyName = this.queryData.userName
				this.queryData.auditName = undefined
			} else {
				this.queryData.auditName = this.queryData.userName
				this.queryData.applyName = undefined
			}

			const [startTime, endTime] = this.searchTime || []
			let searchTimeObj
			if (this.selectTime === '0') {
				searchTimeObj = {
					applyTimeStart: startTime
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
					applyTimeEnd: endTime
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined
				}
			} else {
				searchTimeObj = {
					auditTimeStart: startTime
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
					auditTimeEnd: endTime
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined
				}
			}
			const params = {
				...this.queryData,
				...searchTimeObj,
				...this.getParams(params)
			}

			this.$api
				.playerAuditList(params)
				.then((res) => {
					this.loading = false
					const { code, data, msg } = res
					if (res && code === 200) {
						this.now = dayjs(new Date()).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						this.dataList = (data && data.record) || []
						this.total = (data && data.totalRecord) || 0
						if (this.dataList) {
							this.dataList.forEach((item) => {
								item.lockStatus = item.lockStatus === 1
							})
						}
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		setDisabled(row) {
			if (row.lockAccountId) {
				return (
					row.lockStatus &&
					Number(row.lockAccountId) !== this.userInfo.id
				)
			} else {
				return row.lockStatus && row.lockName !== this.userInfo.username
			}
		},
		goDetail(row) {
			if (row.lockAccountId) {
				this.type =
					row.lockStatus &&
					Number(row.lockAccountId) === this.userInfo.id
			} else {
				this.type =
					row.lockStatus && row.lockName === this.userInfo.username
			}
			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.dataList = []
			this.showDetail = false
			this.loadData()
		},
		reset() {
			this.pageNum = 1

			this.selectTime = '0'
			this.selectUserName = '0'
			this.searchTime = [start(), end()]

			this.queryData = {
				userName: undefined,
				auditStatus: undefined,
				orderProperties: undefined,
				applyName: undefined,
				auditName: undefined,
				lockStatus: '',
				auditNum: undefined,
				orderType: undefined,
				orderKey: undefined
			}
			this.formTime = {
				time: [start(), end()],
				time2: []
			}
			this.loadData()
		},
		lockChange(val) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.lockMemberAuditRecord({
					id: val.id,
					merchantId: val.merchantId,
					lockStatus: val.lockStatus ? 1 : 0
				})
				.then((res) => {
					this.loadData()
					const { code, msg } = res
					if (res && code === 200) {
						loading.close()
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
					} else {
						this.loadData()
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					loading.close()
					this.loadData()
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
</style>
